<template>
  <div>
    <!-- 一秒选花 -->
    <div class="choice">
      <p>&nbsp;&nbsp;一秒选花</p>
      <ul class="choice-top">
        <li>
          <img src="@assets/imgs/imgNav1.png" alt />
          <p>送恋人</p>
        </li>
        <li>
          <img src="@assets/imgs/imgNav2.png" alt />
          <p>送长辈</p>
        </li>
        <li>
          <img src="@assets/imgs/imgNav3.png" alt />
          <p>送亲友</p>
        </li>
      </ul>
      <ul class="choice-bottom">
        <li>
          <p>生日祝福</p>
          <img src="@assets/imgs/imgNav4.png" alt />
        </li>
        <li>
          <p>求婚表白</p>
          <img src="@assets/imgs/imgNav5.png" alt />
        </li>
        <li>
          <p>商务开业</p>
          <img src="@assets/imgs/imgNav6.png" alt />
        </li>
        <li>
          <p>装饰绿植</p>
          <img src="@assets/imgs/imgNav7.png" alt />
        </li>
      </ul>
    </div>
    <!-- /一秒选花 -->
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.choice {
  margin: 10px auto;
  padding: 10px 0 20px;
  font-size: 16px;
  font-weight: bold;
  color: #884e22;
  background-color: #fff;
  > p {
    border-left: 1px solid red;
    margin-left: 10px;
  }
  .choice-top {
    margin: 20px auto;
    display: flex;
    justify-content: space-evenly;
    > li {
      position: relative;
      img {
        width: 112px;
        height: 126px;
        border-radius: 5px;
      }
      > p {
        position: absolute;
        left: 0;
        bottom: -10px;
        border-radius: 0 0 5px 5px;
        height: 30px;
        width: 100%;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        background-color: rgb(255, 175, 178);
      }
    }
  }
  .choice-bottom {
    display: flex;
    justify-content: space-evenly;
    font-size: 14px;
    li {
      padding: 10px 8px;
      border-radius: 5px;
      background: rgb(243, 235, 227);
      text-align: center;
      > p {
        padding: 8px 0;
      }
      img {
        width: 68px;
        height: 68px;
      }
    }
  }
}
</style>
